
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery响应式网站图片无限加载瀑布流布局</title>
    <link rel="stylesheet" href="/static/scroll/css/style.css" media="screen" />
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="/static/scroll/js/jquery.lazyload.min.js"></script>
    <script type="text/javascript" src="/static/scroll/js/blocksit.min.js"></script>
</head>
<body>
<div id="wrapper">
    <div id="container">
        <div class="grid">
            <div class="imgholder"><img class="lazy" src="images/pixel.gif" data-original="/static/scroll/images/1.jpg" width="300" /></div>
            <strong>图片信息1</strong>
            <p>2007年7月，jQuery 1.1.3版发布，这次小版本的变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始，jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。</p>
            <div class="meta"><a href="#">点击查看>>></a></div>
        </div>
        <div class="grid">
            <div class="imgholder"><img class="lazy" src="images/pixel.gif" data-original="images/2.jpg" width="175" /></div>
            <strong>图片信息2</strong>
            <p>jQuery的第一个稳定版本，并且已经支持CSS选择符、事件处理和AJAX交互。</p>
            <div class="meta"><a href="#">点击查看>>></a></div>
        </div>
        <div class="grid">
            <div class="imgholder"><img class="lazy" src="images/pixel.gif" data-original="images/3.jpg" width="175" /></div>
            <strong>图片信息3</strong>
            <p>jquery响应式网站图片无限加载瀑布流布局</p>
            <div class="meta"><a href="#">点击查看>>></a></div>
        </div>
        <div class="grid">
            <div class="imgholder"><img class="lazy" src="images/pixel.gif" data-original="images/4.jpg" width="175" /></div>
            <strong>图片信息4</strong>
            <p>jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库</p>
            <div class="meta"><a href="#">点击查看>>></a></div>
        </div>
        <div class="grid">
            <div class="imgholder"><img class="lazy" src="images/pixel.gif" data-original="images/5.jpg" width="175" /></div>
            <strong>图片信息5</strong>
            <p>jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展</p>
            <div class="meta"><a href="#">点击查看>>></a></div>
        </div>
        <div class="grid">
            <div class="imgholder"><img class="lazy" src="images/pixel.gif" data-original="images/6.jpg" width="175" /></div>
            <strong>图片信息6</strong>
            <p>jQuery的第一个稳定版本，并且已经支持CSS选择符、事件处理和AJAX交互。</p>
            <div class="meta"><a href="#">点击查看>>></a></div>
        </div>
        <div class="grid">
            <div class="imgholder"><img class="lazy" src="images/pixel.gif" data-original="images/7.jpg" width="175" /></div>
            <strong>图片信息7</strong>
            <p>jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展</p>
            <div class="meta"><a href="#">点击查看>>></a></div>
        </div>
        <div class="grid">
            <div class="imgholder"><img class="lazy" src="images/pixel.gif" data-original="images/8.jpg" width="175" /></div>
            <strong>图片信息4</strong>
            <p>jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库</p>
            <div class="meta"><a href="#">点击查看>>></a></div>
        </div>
        <div class="grid">
            <div class="imgholder"><img class="lazy" src="images/pixel.gif" data-original="images/9.jpg" width="175" /></div>
            <strong>图片信息8</strong>
            <p>2007年7月，jQuery 1.1.3版发布，这次小版本的变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始，jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。</p>
            <div class="meta"><a href="#">点击查看>>></a></div>
        </div>
        <div class="grid">
            <div class="imgholder"><img class="lazy" src="images/pixel.gif" data-original="images/10.jpg" width="175" /></div>
            <strong>图片信息9</strong>
            <p>2007年7月，jQuery 1.1.3版发布，这次小版本的变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始，jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。</p>
            <div class="meta"><a href="#">点击查看>>></a></div>
        </div>
        <div class="grid">
            <div class="imgholder"><img class="lazy" src="images/pixel.gif" data-original="images/11.jpg" width="175" /></div>
            <strong>图片信息10</strong>
            <p>jQuery的第一个稳定版本，并且已经支持CSS选择符、事件处理和AJAX交互。</p>
            <div class="meta"><a href="#">点击查看>>></a></div>
        </div>
    </div>
</div>
<#--<div id="test" style="display:none;">-->
    <#--<div class="grid">-->
        <#--<div class="imgholder"><img class="lazy" src="images/pixel.gif" data-original="images/1.jpg" width="175" /></div>-->
        <#--<strong>图片信息1</strong>-->
        <#--<p>2007年7月，jQuery 1.1.3版发布，这次小版本的变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始，jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。</p>-->
        <#--<div class="meta"><a href="#">点击查看>>></a></div>-->
    <#--</div>-->
    <#--<div class="grid">-->
        <#--<div class="imgholder"><img class="lazy" src="images/pixel.gif" data-original="images/2.jpg" width="175" /></div>-->
        <#--<strong>图片信息2</strong>-->
        <#--<p>jQuery的第一个稳定版本，并且已经支持CSS选择符、事件处理和AJAX交互。</p>-->
        <#--<div class="meta"><a href="#">点击查看>>></a></div>-->
    <#--</div>-->
    <#--<div class="grid">-->
        <#--<div class="imgholder"><img class="lazy" src="images/pixel.gif" data-original="images/3.jpg" width="175" /></div>-->
        <#--<strong>图片信息3</strong>-->
        <#--<p>jquery响应式网站图片无限加载瀑布流布局</p>-->
        <#--<div class="meta"><a href="#">点击查看>>></a></div>-->
    <#--</div>-->
    <#--<div class="grid">-->
        <#--<div class="imgholder"><img class="lazy" src="images/pixel.gif" data-original="images/4.jpg" width="175" /></div>-->
        <#--<strong>图片信息4</strong>-->
        <#--<p>jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库</p>-->
        <#--<div class="meta"><a href="#">点击查看>>></a></div>-->
    <#--</div>-->
    <#--<div class="grid">-->
        <#--<div class="imgholder"><img class="lazy" src="images/pixel.gif" data-original="images/5.jpg" width="175" /></div>-->
        <#--<strong>图片信息5</strong>-->
        <#--<p>jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展</p>-->
        <#--<div class="meta"><a href="#">点击查看>>></a></div>-->
    <#--</div>-->
    <#--<div class="grid">-->
        <#--<div class="imgholder"><img class="lazy" src="images/pixel.gif" data-original="images/6.jpg" width="175" /></div>-->
        <#--<strong>图片信息6</strong>-->
        <#--<p>jQuery的第一个稳定版本，并且已经支持CSS选择符、事件处理和AJAX交互。</p>-->
        <#--<div class="meta"><a href="#">点击查看>>></a></div>-->
    <#--</div>-->
<#--</div>-->
<script type="text/javascript">
    $(function(){
        $("img.lazy").lazyload({
            load:function(){
                $('#container').BlocksIt({
                    numOfCol:5,
                    offsetX: 8,
                    offsetY: 8
                });
            }
        });
        $(window).scroll(function(){
            // 当滚动到最底部以上50像素时， 加载新内容
            if ($(document).height() - $(this).scrollTop() - $(this).height()<50){
                $('#container').append($("#test").html());
                $('#container').BlocksIt({
                    numOfCol:5,
                    offsetX: 8,
                    offsetY: 8
                });
                $("img.lazy").lazyload();
            }
        });

        //window resize
        var currentWidth = 1100;
        $(window).resize(function() {
            var winWidth = $(window).width();
            var conWidth;
            if(winWidth < 660) {
                conWidth = 440;
                col = 2
            } else if(winWidth < 880) {
                conWidth = 660;
                col = 3
            } else if(winWidth < 1100) {
                conWidth = 880;
                col = 4;
            } else {
                conWidth = 1100;
                col = 5;
            }

            if(conWidth != currentWidth) {
                currentWidth = conWidth;
                $('#container').width(conWidth);
                $('#container').BlocksIt({
                    numOfCol: col,
                    offsetX: 8,
                    offsetY: 8
                });
            }
        });
    });
</script>
</body>
</html>